<template>
  <div class="">
    <x-header class="header" :left-options="{backText: ''}">运维物资详情</x-header>
    <div class="content pad">
      <ul>

        <li v-for="(x,i) of items" :key="i" :style="{color:x.color}" class="ub pad my-item">
          <div class="ub uc" style="width:100px;">
            <div class="circle ub uc">{{x.buy_number|int}}{{x.units}}</div>
          </div>
          <div class="uf-1 ub-v" style="margin:10px;">
            
            <div class="main-info" v-html="x.comdity_name"></div>
            <div class="sub-title">需求人 {{x.demand_name}}</div>
            <div class="sub-title">单价 ￥{{x.real_price|money}}</div>
           
            
          </div>
          <div class="ub uc">
            {{x.order_date|prettyDate}}
          </div>

        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { XHeader, XTable } from "vux";
export default {
  data() {
    return {
      comp_id:this.$route.params['comp_id']||2,
      items: []
    };
  },
  mounted() {
    this.$vux.loading.show({
      text: "Loading"
    })
    this.$store.dispatch("operation_shop_month_detail", { comp_id:this.comp_id })
      .then(resp => {
        this.items = resp.data
        this.$vux.loading.hide()
      });
  },
  methods: {},
  components: {
    XHeader,
    XTable
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
li {
  .title {
    padding-left: 20px;
  }
  .main-info{
    margin-bottom: 0.5em;
  }
  .sub-title {
    font-size: 0.9em;
  }
  i {
    margin-left: 10px;
  }
 
}
.circle{
  color:#3FC7Ff;
  border: 1px solid #3FC7FA;
  border-radius: 50%;
  padding: 1em 0.2em;
  width:100%;
}
</style>